<template>
    <div class="container" style="">
        <div style="margin-bottom: 10px">

            <el-form :inline="true" :model="queryCri" class="demo-form-inline" size="small">
                <el-form-item label="项目编号">
                    <el-input style="width:120px" v-model="queryCri.projectSeq  "></el-input>
                </el-form-item>
                <el-form-item label="项目标题">
                    <el-input style="width:120px" v-model="queryCri.proTitle"></el-input>
                </el-form-item>

                <el-button size="small" type="primary" @click="getTableData" >查询</el-button>

                <div ></div>

                <el-button size="small" type="primary" @click="addProjectDialogVisi = true" >
                    添加项目
                </el-button>
                <!--<el-button size="small" type="primary" @click="editProject(true)" >编辑项目</el-button>-->
                <el-button size="small" type="danger"  @click="deleteProjects()">删除项目</el-button>
                <el-button size="small" type="primary"  @click="setProsOrder()">重置顺序</el-button>
                <!--
                <el-button size="small" type="primary"  >设置为隐藏</el-button>
                <el-button size="small" type="primary"  >设置为完成</el-button>
                <el-button size="small" type="primary"  >设置为开始</el-button>
                -->
                <!--<el-button size="small" type="primary" @click="managePicInTop" >图片管理</el-button>-->
            </el-form>
        </div>

        <addProjectDialog :addProjectDialogVisi='addProjectDialogVisi' ></addProjectDialog>

        <editProjectDialog :editProjectDialogVisi='editProjectInfo.editProjectDialogVisi'
                           :userData="editProjectInfo.userData"  ref="editModal" >
        </editProjectDialog>

        <el-table :data="table.data" align="center" @selection-change="selsChange" stripe border style="width:100%">
            <el-table-column type="selection" width="65"></el-table-column>
            <!--<el-table-column type="index" width="65" label="#" :index="indexMethod" ></el-table-column>-->
            <el-table-column prop="projectSeq" label="项目编号"></el-table-column>
            <el-table-column prop="proTitle" label="项目标题"></el-table-column>
            <!--<el-table-column prop="proDesc" label="项目描述"></el-table-column>-->
            <el-table-column prop="shareTitle" label="分享标题"></el-table-column>
            <!--<el-table-column prop="shareDesc" label="分享描述"></el-table-column>-->

            <el-table-column label="状态" prop="status">
                <template slot-scope="scope">
                    <el-tag type="danger"  v-if="scope.row.status == '0'">未开始</el-tag>
                    <el-tag type="success"  v-if="scope.row.status == '1'">开始</el-tag>
                    <el-tag type="info"  v-if="scope.row.status == '2'">完毕</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否显示" prop="isShow">
                <template slot-scope="scope">
                    <el-tag type="success"  v-if="scope.row.isShow == '0'">显示</el-tag>
                    <el-tag type="danger"  v-if="scope.row.isShow == '1'">隐藏</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="开始时间" prop="updateTime"> </el-table-column>
            <el-table-column label="结束时间" prop="endTime"> </el-table-column>
            <el-table-column label="访问数" prop="accessCount"> </el-table-column>
            <!--<el-table-column label="图片数" prop="picNum"> </el-table-column>-->

            <el-table-column :label="$t('Operation')" width="160px;">
                <template slot-scope="scope">
                    <el-button size="mini" @click="managePic(scope.row.projectId)">图片</el-button>
                    <el-button size="mini" @click="editProject(false , scope.row.projectId)">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.currentPage"
                :page-sizes="[10, 20, 50]"
                :page-size="table.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.total">
            </el-pagination>
        </div>

    </div>

</template>

<script>
    import * as appServer from '../../store/appServerParams.js'
    import * as util from '../../assets/util.js';

    import addProjectDialog from './AddProject';
    import editProjectDialog from './EditProject';

    export default {
        components: { addProjectDialog , editProjectDialog },
        data() {
            return {
                addProjectDialogVisi : false,
                editProjectInfo : {
                    editProjectDialogVisi : false,
                    userData : {
                        coverImgPath:"",
                    },
                },
                table : {
                    data : [],
                    currentPage : 1,
                    pageSize : 10,
                    total : 0
                },
                selectedProIds : [],
                queryCri :{
                    proTitle : "",
                    projectSeq : "",
                }
            }
        },
        methods: {
            managePicInTop(   ){
                let vm = this;
                if( this.selectedProIds.length != 1 ){
                    vm.$message.error("请勾选一个项目");
                    return;
                }
                let tproId = this.selectedProIds[0];
                let urlpath = "/projectDetail?pid="+tproId;
                window.open( urlpath ) ;
            },
            managePic(  proId  ){
                let vm = this;
                let tproId = proId;
                if( tproId ==null ){
                    if( this.selectedProIds.length != 1 ){
                        vm.$message.error("请勾选一个项目");
                        return;
                    }
                    tproId = this.selectedProIds[0];
                }

                let urlpath = "/projectDetail?pid="+tproId;
                window.open( urlpath ) ;
            },
            refreshImg( type , newPath ){
                this.editProjectInfo.userData.coverImgPath = newp;
            },
            deleteProjects(){
                let vm = this;
                if( vm.selectedProIds.length < 1 ){
                    vm.$message.error("请勾选要删除的项目");
                    return;
                }
                vm.$confirm(vm.$t('IsDelete'), vm.$t('Tip'), {
                    confirmButtonText: vm.$t('Confirm'),
                    cancelButtonText: vm.$t('Cancel'),
                    type: 'warning'
                }).then(() => {
                    vm.doDelete();
                });
            },
            doDelete(){
                let vm = this;
                let path = "/photo/delProjects";
                vm.$http.post( path ,{
                            projectIds: JSON.stringify( vm.selectedProIds),
                    }
                ).then(function (response) {
                    vm.$message({
                        message: "操作完成",
                        type: 'success'
                    });
                    vm.refreshTable();
                }).catch(function (error) {
                    console.log(error)
                    vm.$message.error("error");
                })
            },
            setProsOrder(){
                let vm = this;
                let path = "/photo/resetPOrder";
                vm.$http.get( path , {
                        params: {
                            arg1: "123",
                        }
                    }
                ).then(function (response) {
                        vm.$message({
                            message: vm.$t('Success'),
                            type: 'success'
                        });
                    }).catch(function (error) {
                    vm.$message.error(vm.$t('Failed'));
                    console.log(error)
                })
            },
            editProject( isTop , proId ){
                let vm = this;
                let toUseId ;

                if( isTop  ){
                    if( this.selectedProIds.length != 1 ){
                        vm.$message.error("请勾选一个项目");
                        return;
                    }
                    toUseId = vm.selectedProIds[0];
                }else{
                    toUseId = proId;
                }

                let path = "/photo/queryProjectInfo";
                vm.$http.get( path ,{
                        params: {
                            projectId: toUseId,
                        }
                    }
                ).then(function (response) {
                    vm.editProjectInfo.userData = response.data.pro;
                    vm.editProjectInfo.userData.coverImgPath = appServer.BASE_URL + vm.editProjectInfo.userData.coverImg;
                    vm.editProjectInfo.userData.shareIconImgPath = appServer.BASE_URL + vm.editProjectInfo.userData.shareIconImg;
                    vm.editProjectInfo.userData.advertiseImgPath = appServer.BASE_URL + vm.editProjectInfo.userData.advertiseImg;

                    vm.$refs.editModal.initImg();

                    vm.editProjectInfo.editProjectDialogVisi = true;

                }).catch(function (error) {
                    console.log(error)
                    vm.$message.error("error");
                })

            },
            refreshTable(){
                // console.log("refresh table datas") ;
                this.getTableData();
            },
            handleSizeChange(val) {
                let vm = this
                vm.table.pageSize = val
                vm.getTableData()
            },
            handleCurrentChange(val) {
                let vm = this
                vm.table.currentPage = val
                vm.getTableData()
            },
            getTableData(){
                let path = "/photo/queryProjectByPage";
                let vm = this;
                vm.$http.get( path ,{
                        params: {
                            proTitle: vm.queryCri.proTitle,
                            projectSeq: vm.queryCri.projectSeq,
                            currentPage: vm.table.currentPage,
                            pageSize: vm.table.pageSize,
                        }
                    }
                ).then(function (response) {
                    vm.table.data = response.data.data;
                    vm.table.total = response.data.total;
                }).catch(function (error) {
                    console.log(error)
                })
            },
            selsChange(sels) {
                //被选中的行组成数组
                let tmpSel = [];
                for (let index in sels) {
                    tmpSel.push(sels[index].projectId);
                }
                this.selectedProIds = tmpSel;
            },
            indexMethod(index) {
                let vm = this;
                return index+(vm.table.currentPage-1)*vm.table.pageSize+1;
            }
        },
        created: function () {
            var vm = this;
            vm.getTableData();
        }
    }
</script>

